<template>
  <view class="chart_box">
    <view class="chart_container">
      <view class="head">
        <!-- <image class="w-70rpx" src="@/static/ring/chart/activity.png" mode="widthFix"></image> -->
        <text class="title">🔥 体征</text>
<!--        <image
            class="tips-icon"
            src="/static/icon/tip.svg"
            @click="showTips"
        ></image>-->
        <image
            class="right-arrow-icon"
            src="/static/icon/right.svg"
            mode="widthFix"
            @click="gotoDataPage"
        ></image>
      </view>
      <text class="refresh-tip">点击刷新按钮开始测量体征</text>
      <!-- 数据行：心率 + 血氧 -->
      <view class="data-row">
        <view class="data-item">
          <text class="data-label">实时心率</text>
          <text class="data-value">{{ heartRate }}  次/分钟</text>
          <text class="refresh-tip">{{ heartRateTime }}</text>
          <image
              class="refresh-icon"
              src="/static/icon/refresh.svg"
              mode="widthFix"
              @click="toSync('heartBeat')"
          ></image>
        </view>
        <view class="data-item">
          <text class="data-label">实时血氧</text>
          <text class="data-value">{{ bloodOxygen }}  %</text>
          <text class="refresh-tip">{{ bloodOxygenTime }}</text>
          <image
              class="refresh-icon"
              src="/static/icon/refresh.svg"
              mode="widthFix"
              @click="toSync('bloodOxygen')"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

import { getHeatBeatData, getBloodData } from "@/api/ring/report.js";
import dayjs from "dayjs";
import store from "@/store/index.js";

export default {
  props: {
    date: String,
  },
  data() {
    return {
      // 实时心率
      heartRate: '---',
      heartRateTime: '',
      // 实时血氧
      bloodOxygen: '---',
      bloodOxygenTime: '',
    };
  },

  computed: {
    isLogin() {
      return store.state.userToken;
    },
  },
  mounted() {
    this.updateHeatData();
    this.updateBloodData();
  },
  methods: {
    getTitle() {
      return 'activity';
    },
    gotoDataPage() {
      const date = dayjs().format("YYYY-MM-DD");
      // 如果是今天 且同步时间不同 意味着今天没有对应的同步数据
      uni.navigateTo({ url: `/pages/ring/detail/index?type=Heart&title=体征&date=`+date });
    },
    // 刷新事件（可通知父组件调接口）
    handleRefresh(type) {
      // this.$emit('onRefresh', type);
      return uni.showToast({
        title: "敬请期待:" + type,
        icon: "none",
      });
    },
    updateHeatData(date) {
      if (!this.isLogin) return;
      date = date || this.date || dayjs().format("YYYY-MM-DD HH:mm:ss");
      getHeatBeatData({
        dateStr: dayjs(date).format("YYYY-MM-DD"),
        offsetMinutes: new Date().getTimezoneOffset(),
      })
          .then((res) => {
            console.log("====getHeatBeatData====", res.data);
            this.heartRate = res.data.value;
            this.heartRateTime = res.data.dateTimeFormat;
          })
          .catch((error) => console.log(error));
    },
    updateBloodData(date) {
      if (!this.isLogin) return;
      date = date || this.date || dayjs().format("YYYY-MM-DD HH:mm:ss");
      getBloodData({
        dateStr: dayjs(date).format("YYYY-MM-DD"),
        offsetMinutes: new Date().getTimezoneOffset(),
      })
          .then((res) => {
            console.log("====getBloodData====", res.data);
            this.bloodOxygen = res.data.value;
            this.bloodOxygenTime = res.data.dateTimeFormat;
          })
          .catch((error) => console.log(error));
    },
    showTips() {
      uni.showToast({
        title: "这里是体征数据的相关说明内容",
        icon: "none",
      });
    },
    toSync(type) {
      const ringUser = store.state.ringUser;
      if (ringUser.lastUpDateTime) {
        const last = dayjs(ringUser.lastUpDateTime);
        const interval = dayjs().diff(last, "seconds");
        if (interval <= 30)
          return uni.showToast({
            title: "同步频繁，请稍候",
            icon: "none",
          });
      }

      this.$nextTick(() => {
        this.$store.dispatch("ringDataManage/syncData");
        this.$emit("onSync");
      });
      if (type === "heartBeat") {
        this.updateHeatData()
      } else if (type === "bloodOxygen") {
        this.updateBloodData()
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.chart_box {
  width: 100%;
  height: 100%;
  color: black;

  .w-70rpx {
    width: 70rpx;
  }

  .w-40rpx {
    width: 40rpx;
  }

  .chart_container {
    padding: 20rpx 30rpx;

    .head {
      width: 100%;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title {
        font-size: 32rpx;
        font-weight: 500;
        text-align: left;
        margin-left: 12rpx;
      }

      .right-arrow-icon {
        width: 32rpx;
        height: 32rpx;
      }

      .tips-icon {
        width: 32rpx;
        height: 32rpx;
        margin-left: -360rpx;
        cursor: pointer;
      }
    }

    .refresh-tip {
      font-size: 24rpx; // 增大文字提示的字体大小
      color: #999999;
      margin-top: 8rpx;
      margin-bottom: 16rpx;
    }

    .data-row {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx; // 将实时心率和血氧的窗口往下移动一点
    }

    .data-item {
      width: 48%;
      background: #D0E5F8;
      border-radius: 20rpx;
      padding: 16rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: relative;
    }

    .data-label {
      font-size: 24rpx;
      color: #333;
      margin-bottom: 8rpx;
    }

    .data-value {
      font-size: 26rpx;
      color: #ff5722;
      font-weight: bold;
    }

    .refresh-icon {
      width: 24rpx;
      height: 24rpx;
      position: absolute;
      top: 16rpx;
      right: 16rpx;
    }
  }
}
/* 外层卡片 */
.vital-signs-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 16rpx;
  margin: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

/* 头部区域 */
.vital-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 12rpx;
}
.vital-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff5722;
  margin-bottom: 4rpx;
}
.vital-time {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 8rpx;
}
.refresh-desc {
  font-size: 22rpx;
  color: #666;
}
</style>
